<template>
	<view>
		<template v-if="timeNum">
			<view class="redDivActive" v-if="type=='perOrder'">
				过期{{ timeNum }}
			</view>
			<view class="redDiv" v-else>
				过期
				<view>{{ timeNum }}</view>
			</view>


		</template>

	</view>

</template>

<script>
	export default {
		name: "timeoutCountdown",
		props: {
			starTime: {
				type: Date,
				required: true
			},
			type: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				intervalId: null,
				timeNum: ''
			};
		},
		computed: {

		},
		methods: {
			remainingTime() {
				const start = this.starTime;
				const now = new Date();
				const distance = now - start;
				if (distance < 0) {
					return '00:00:00';
				}
				const days = this.pad(Math.floor((distance / (1000 * 60 * 60 * 24))));
				const hours = this.pad(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
				const minutes = this.pad(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
				const seconds = this.pad(Math.floor((distance % (1000 * 60)) / 1000));

				return `${days}天${hours}小时${minutes}分${seconds}秒`;
			},
			pad(num) {
				return ('00' + num).slice(-2);
			},
			startCountdown() {
				this.intervalId = setInterval(() => {
					this.timeNum = this.remainingTime()
				}, 1000);
			},
			stopCountdown() {
				if (this.intervalId) {
					clearInterval(this.intervalId);
				}
			}
		},
		mounted() {
			this.startCountdown();
		},
		beforeDestroy() {
			this.stopCountdown();
		}
	};
</script>
<style lang="scss" scoped>
	.redDiv {
		display: block;
		// padding:3px;
		text-align: center;
		background: red;
		color: #fff;
		font-size: 28rpx;
		line-height: 30rpx;
		transform: scale(0.9);
	}

	.redDivActive {
		display: block;
		padding: 0 6rpx;
		text-align: center;
		background: red;
		color: #fff;
		font-size: 28rpx;
	}
</style>